<template>
  <van-popup v-model:show="showBottom" position="bottom" round closeable :style="{'width':'100%' }">
    <div class="pop-content">
      <div class="pop-title">
        商品分佣配置
      </div>
      <div class="pop-form-box">
        <van-form @submit="onSubmit">
          <van-cell-group>
            <van-field v-model="popForm.goodsName" name="goodsName" label="商品" placeholder="请选择商品" input-align="right"
              error-message-align="right" :rules="[{ required: true, message: '请选择商品' }]" readonly is-link
              @click="chooseGoodsHandle" />
            <van-field v-model="popForm.incomeDiscount" type="number" name="incomeDiscount" label="留存比(千分位)"
              placeholder="留存比(千分位)" input-align="right" error-message-align="right"
              :rules="[{ required: true, message: '请填写留存比' }]">
              <template #right-icon>
                <span>‰</span>
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 20px;">
            <van-button round block type="primary" native-type="submit">
              确认
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </van-popup>

  <van-popup v-model:show="showBottomGoods" position="bottom" round :style="{'width':'100%' }" @close="goodsClose">
    <van-picker title="选择商品" :model-value="popForm.goodsId" :columns="columns" :columns-field-names="customFieldName"
      @cancel="chooseGoodsCancel" @confirm="chooseGoodsSucc" />
  </van-popup>
</template>

<script setup>
import { showToast } from "vant"
import { ref } from "vue"
import api from '../api'

let showBottom = ref(false)
let showBottomGoods = ref(false)

const emit = defineEmits(["close"])

let popForm = ref({})

let columns = ref([])
const customFieldName = {
  text: 'goodsName',
  value: 'goodsId',
}

const dialogShow = () => {
  showBottom.value = true
}

const chooseGoodsHandle = () => {
  getGoodsList()
  showBottom.value = false
  showBottomGoods.value = true
}

const goodsClose = () => {
  showBottom.value = true
}

const getGoodsList = () => {
  api.goodsList().then(res => {
    if (res.code == '200') {
      columns.value = res.data?.list || []
    } else {
      showToast(res.msg)
    }
  }).catch(err => {
    console.log(err)
  })
}

const chooseGoodsSucc = (data) => {
  const { selectedOptions } = data
  if (selectedOptions?.length) {
    const { goodsId, goodsName } = selectedOptions[0]
    popForm.value.goodsId = goodsId
    popForm.value.goodsName = goodsName
  }
  showBottomGoods.value = false
}

const chooseGoodsCancel = () => {
  showBottomGoods.value = false
  showBottom.value = true
}

const onSubmit = () => {
  const { goodsId, incomeDiscount } = popForm.value
  api.goodsDefaultSet({
    goodsId,
    incomeDiscount,
  }).then(res => {
    showToast(res.msg)
    if (res.code == '200') {
      showBottom.value = false
      emit('close')
    }
  }).catch(err => {
    console.log(err)
  })
}

defineExpose({
  dialogShow,
})
</script>

<style lang="scss" scoped>
.pop-content {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
  .pop-title {
    box-sizing: border-box;
    padding: 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
}
</style>